<template>
	<view class="container">
		<view class="search-box">
			<view class="input-box">
				<image class="magnifier" src="http://images.linglinggong.net/icon1/44.png" mode="aspectFill"></image>
				<input @confirm="handleInput(word)" focus="true" maxlength="12" type="text"  placeholder="请输入关键词" placeholder-class="plaho" v-model="word" />
			</view> 
		</view>
		
		<view class="search-wraper">
			<!-- 热门搜索 -->
			<view class="hot-search">
				<view class="title">
					<text>热门搜索</text>
					<image src="http://images.linglinggong.net/icon1/46.png" mode="aspectFill" @click="handleRefresh" :class=" isRotate ? 'rotate' : ''"></image>
				</view>
				<view class="list" >
					<view v-for="(hot, index) in this.hotList.slice(this.limitNum, this.limitNum+7)" :key="index" @click="handleSelectName(hot)">{{ hot }}</view>
				</view>
			</view>
			<!-- 历史搜索 -->
			<view class="history-search">
				<view class="title">
					<text>历史搜索</text>
					<image src="http://images.linglinggong.net/icon1/45.png" mode="aspectFill" @click="handleCloseHistory"></image>
				</view>
				<view class="list">
					<view v-for="(history, index) in historyList" :key="index" @click="handleSelectName(history)">{{ history }}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				userType: '',//用户类型
				word: '',
				hotList: [], // 热门搜索列表
				historyList: [], // 历史搜索列表
				isRotate: false,//是否旋转
				limitNum: 0,//热门词显示数量，index
				showHotList: [],//显示的热词
			}
		},
		methods: {
			// 刷新，换热词
			handleRefresh () {
				this.isRotate = true
				if (this.limitNum+7 < this.hotList.length) {
					this.limitNum = this.limitNum + 7
				}else {
					this.limitNum = 0
				}
				setTimeout(() => { this.isRotate = false }, 500)
				
			},
			
			// 历史记录
			handleInput (word) {
				// 如果搜索关键字不为空，则将其缓存起来
				if (word.trim().length) {
					//如果历史搜索关键字已存在，则删除过去历史关键字
					if(this.historyList.includes(word)) {
						let index = this.historyList.indexOf(word)
						this.historyList.splice(index, 1)
					}
					this.historyList.unshift(word)
					if (this.historyList.length >= 12) this.historyList.pop(this.historyList[this.historyList.length - 1])
					uni.setStorageSync('historyList', this.historyList)
					uni.setStorageSync('word', word)
					uni.navigateBack({ delta: 1 })
				} else {
					uni.setStorageSync('word', '')
					uni.navigateBack({ delta: 1 })
				} 
			},
			
			// 选中搜索关键字
			handleSelectName (word) {
				this.word = word
				uni.setStorageSync('word', word)
				uni.navigateBack({ delta: 1 })
			},
			
			// 清除历史记录缓存
			handleCloseHistory () {
				if (!this.historyList.length) return uni.showToast({ title: '您没有历史记录需要清除~', icon: 'none' })
				this.historyList = [] 
				uni.removeStorageSync('historyList')
			},
		},
		onShow() {
			this.userType = uni.getStorageSync('userType')
			// 获取热门搜索 
			this.hotList = Object.values(uni.getStorageSync('hotList'))
			// 获取历史搜索
			this.historyList = uni.getStorageSync('historyList') || [] 
			uni.setStorageSync('word', '')
		},
	}
</script>

<style lang="less" scoped> 
.container {
	// border: 1px solid #000000;
	background-color: #FFFFFF;
	height: 100vh;
	& > .search-box {
		padding: 0 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03);
		.input-box {
			height: 72rpx;
			width: 690rpx;
			display: flex;
			align-items: center;
			border-radius: 19px;
			background-color: #F7F7F7;
			
			.magnifier {
				position: absolute;
				left: 60rpx;
				width: 30rpx;
				height: 30rpx;
			}
	
			input {
				// border: 1px solid #007AFF;
				background: transparent;
				padding-left: 68rpx;
				width: 630rpx;
				height: 72rpx;
				font-size: 14px;
	
				.plaho {
					font-size: 14px;
					color: rgba(64,33,16,0.40);
					letter-spacing: -0.34px;
					line-height: 44rpx;
				}
			}
		}
	}
	& > .search-wraper {
		margin-top: 40rpx;
		& > .hot-search {
			margin-bottom: 62rpx;
		}
		& > .history-search {
			image {
				&:active {
					opacity: 0.7;
				}
			}
		}
		
		& > view {
			margin: 0 30rpx;
			& > .title {
				height: 40rpx;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: bold;
				
				image {
					width: 36rpx;
					height: 36rpx;
					&.rotate {
						animation: rotate .5s linear infinite;
						@keyframes rotate{
							0%{
								transform: rotateZ(0deg);/*从0度开始*/
							}
							100%{
								transform: rotateZ(360deg);/*360度结束*/
							}
						}
					}
					
				}
			}
			
			& > .list {
				display: flex;
				flex-wrap: wrap;
				color: rgba(64,33,16,0.50);
				// border: 1px solid #4CD964;
				& > view {
					height: 40rpx;
					display: flex;
					padding: 8rpx 30rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					background: #F5F3F1;
					border-radius: 13.5px;
				}
				& > view:nth-child(4n) {
					margin-right: 0rpx;
				}
			}
		}
	}
}
</style>
